import React from 'react';
import {Button, Card, Flex, Radio, Space, Typography} from 'antd';
import {
  AlipayCircleOutlined,
  WechatOutlined,
  LeftOutlined,
  MoneyCollectOutlined, CreditCardOutlined, ScheduleOutlined
} from '@ant-design/icons';
import styles from '../style.less';
import {useAccess} from "umi";
import {IPaymentMethod, OrderPaymentMethod} from "@/components/OrderPaymentModal/types";

const {Title, Text} = Typography;

interface PaymentMethodsProps {
  amount: number;
  loading: boolean;
  selectedMethod: string;
  onChangeMethod: (method: OrderPaymentMethod) => void;
  onBack: () => void;
}

const PaymentMethods: React.FC<PaymentMethodsProps> = ({
                                                         amount,
                                                         loading,
                                                         selectedMethod,
                                                         onChangeMethod,
                                                         onBack,
                                                       }) => {
  const access = useAccess()
  const paymentOptions: IPaymentMethod[] = [
    {
      value: 'wechat',
      permission: 'finance:wechat:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <WechatOutlined style={{color: '#07C160', fontSize: 20}}/>
          <span>微信支付</span>
        </Flex>
      ),
      description: '扫描微信收款码完成支付'
    },
    {
      value: 'alipay',
      permission: 'finance:alipay:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <AlipayCircleOutlined style={{color: '#1677FF', fontSize: 20}}/>
          <span>支付宝</span>
        </Flex>
      ),
      description: '扫描支付宝收款码完成支付'
    },
    {
      value: 'cash',
      permission: 'finance:cash:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <MoneyCollectOutlined style={{color: '#FAAD14', fontSize: 20}}/>
          <span>现金支付</span>
        </Flex>
      ),
      description: '收取现金并确认'
    },
    {
      value: 'monthly',
      permission: 'finance:monthly:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <ScheduleOutlined style={{color: '#722ED1', fontSize: 20}}/>
          <span>月结支付</span>
        </Flex>
      ),
      description: '收取现金并确认'
    },
  ];

  // 过滤选项，只显示有权限的
  const filteredOptions = paymentOptions.filter(option =>
    !option.permission || access.has(option.permission)
  );

  return (
    <div className={styles.paymentMethods}>
      <Card>
        <Button
          type="text"
          icon={<LeftOutlined/>}
          onClick={onBack}
          className={styles.backButton}
        >
          返回订单
        </Button>

        <div className={styles.paymentHeader}>
          <Title level={4} className={styles.paymentTitle}>
            选择支付方式
          </Title>
          <Text strong className={styles.paymentAmount}>
            应付金额: <span className={styles.amount}>¥{amount.toFixed(2)}</span>
          </Text>
        </div>

        <div className={styles.paymentOptionsContainer}>
          <Radio.Group
            className={styles.paymentOptions}
            options={filteredOptions}
            onChange={(e) => onChangeMethod(e.target.value)}
            value={selectedMethod}
            optionType="button"
          />
        </div>

        <div className={styles.paymentTips}>
          <Text type="secondary">
            请根据客户需求选择合适的支付方式
          </Text>
        </div>
      </Card>
    </div>
  );
};

export default PaymentMethods;
